<template>
  <div>
    <div>{{ state }}</div>
    <button @click="change1">浅层作用</button>
    <button @click="change2">浅层不生效</button>
    {{ person.join(',') }}
  </div>
</template>
 
 
 
<script setup lang="ts">
import { shallowReactive, reactive, onActivated, onDeactivated } from 'vue'

 
let person = reactive<number[]>([5,6,7])
setTimeout(() => {
  person = [1, 2, 3]
  console.log(person);
  
},1000)
const obj = {
  a: 1,
  first: {
    b: 2,
    second: {
      c: 3
    }
  }
}
 
const state = shallowReactive(obj)
 
function change1() {
  state.a +=1;
  console.log(state)
}
function change2() {
  state.first.b = 8
  state.first.second.c = 9
  console.log(state);
}
 
 
 
onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
  console.log('onActivated')
})

onDeactivated(() => {
  // 在从 DOM 上移除、进入缓存
  // 以及组件卸载时调用
  console.log('onDeactivated')
})
 
</script>
